<template>
  <span v-if="content" class="copy-text-container" @mouseover="mouseOver" @mouseleave="mouseleave">
    <span v-show="show" v-if="position=='left'" :class="active?'active':''" style="margin-right:5px">{{ content }}</span>

    <el-tooltip v-if="!show" content="单击复制" placement="bottom">
      <i class="el-icon-document-copy color-primary" style="margin: 0 10px;" @click="copyText" />
    </el-tooltip>
    <el-tooltip v-if="show && active" content="单击复制" placement="bottom">
      <i class="el-icon-document-copy color-primary" @click="copyText" />
    </el-tooltip>
    <span v-show="show" v-if="position=='right'" :class="active?'active':''" style="margin-left:5px">{{ content }}</span>
  </span>
</template>
<script>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: true
    },
    position: {
      type: String,
      default: 'right'
    }
  },
  data() {
    return {
      active: false
    }
  },
  methods: {
    copyText() {
      this.$copyText(this.content)
      this.msgSuccess('复制成功')
    },
    mouseOver() {
      this.active = true
    },
    mouseleave() {
      console.log(111)
      this.active = false
    }
  }
}
</script>
<style scoped lang="scss">
    .copy-text-container{
        cursor: pointer;
        span{
            padding: 2px 5px;
        }
        .active{
            color: #409eff;
            background: #ecf5ff;
        }
    }
</style>
